<template>
  <div id="china_map">
    <div id="map_left">
      <div id="map"></div>
    </div>
    <div id="map_right">
      <div id="map_right_top"></div>
      <div id="map_right_bottom"></div>
    </div>
  </div>
</template>

<script>
  import 'echarts/map/js/china.js'
  import data from '../../../apiData/screen/chinaData.js'
  import data2 from '../../../apiData/screen/area_people.js'
  export default {
    data() {
      return {
        myChart1: null,
        myChart2: null,
        myChart3: null,
        options: {},
        data: {},
        data2: {}
      };
    },
    created() {
      this.data = data;
      this.data2 = data2;
      this.$nextTick(() => {
        this.drawChart1();
        this.drawChart2();
        this.drawChart3();
      });
    },
    methods: {
      resetChina() {
        this.$nextTick(() => {
          this.drawChart1();
          this.drawChart2();
          this.drawChart3();
        });
      },
      drawChart1() {
        // 基于准备好的dom，初始化eCharts实例
        if(this.myChart1 !== null && this.myChart1 !== '' && this.myChart1 !== undefined) {
          this.myChart1.dispose();  // 销毁
        }
        this.myChart1 = this.$echarts.init(document.getElementById('map'));
        let option = {
          tooltip: {
            triggerOn: "mousemove",   //mousemove、click
            padding:8,
            borderWidth: 0,
            // borderColor:'#409eff',
            backgroundColor:'rgba(0,0,0,0.6)',
            textStyle:{
              color:'#fff',
              fontSize:13
            },
            formatter: this.setTooltip1
          },
          grid : {
            bottom: 60   //距离容器下边界30像素
          },
          visualMap: {
            show: false,
            left: 26,
            bottom: 40,
            showLabel:true,
            color: '#fff',
            pieces: this.data.pieces
          },
          geo: {
            map: "china",
            scaleLimit: {
              min: 1,
              max: 2
            },
            zoom: 1,
            top: 120,
            emphasis: {  // 鼠标移上 active 样式
              color: 'green',
              itemStyle: {
                areaColor: "rgba(255,255,255,0.7)",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0,
                color: '#fff'
              }
            },
            itemStyle: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)",
            }
          },
          series: [
            {
              name: "ChinaMap",
              type: "map",
              geoIndex: 0,
              data: this.data.mapData
            }
          ]
        };
        option && this.myChart1.setOption(option);

        let timer1 = setTimeout(() => {
          let total = this.data.mapData.length;
          let count = 0;
          this.autoHover(0);
          let timer = setInterval(() => {
            count ++;
            if(count < total) {
              this.autoHover(count);
            }else{
              count = 0;
              this.autoHover(count);
            }
          }, 3000);
          clearTimeout(timer1)
        },3000)
      },
      drawChart2() {
        // 基于准备好的dom，初始化eCharts实例
        if(this.myChart2 !== null && this.myChart2 !== '' && this.myChart2 !== undefined) {
          this.myChart2.dispose();  // 销毁
        }
        this.myChart2 = this.$echarts.init(document.getElementById('map_right_top'));
        let option = {
          tooltip: {
            trigger: 'axis',
            backgroundColor:'rgba(0,0,0,0.6)',
            borderColor: 'rgba(0,0,0,0)',
            textStyle:{
              color:'#ddd',
              fontSize:13
            },
            formatter: this.setTooltip2
          },
          grid: {
            left: '-10%',
            right: '15%',
            bottom: '20%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data.yearData.categories
          },
          yAxis: {
            show: false,
            type: 'value'
          },
          color: ['#f37b1d', '#38b54a'],
          series: [
            {
              name: this.data.yearData.series[0].name,
              type: 'line',
              data: this.data.yearData.series[0].data
            },
            {
              name: this.data.yearData.series[1].name,
              type: 'line',
              data: this.data.yearData.series[1].data
            }
          ]
        };
        option && this.myChart2.setOption(option);
      },
      drawChart3() {
        if(this.myChart3 !== null && this.myChart3 !== '' && this.myChart3 !== undefined) {
          this.myChart3.dispose();  // 销毁
        }
        this.myChart3 = this.$echarts.init(document.getElementById('map_right_bottom'));
        let option = {
          tooltip: {
            trigger: 'axis',
            backgroundColor:'rgba(0,0,0,0.6)',
            borderColor: 'rgba(0,0,0,0)',
            textStyle:{
              color:'#ddd',
              fontSize:13
            },
          },
          grid: {
            left: '0',
            right: '15%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: false,
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter:function(value){
                if (value >= 10000) {
                  return value / 10000 + '万'
                }else{
                  return value
                }
              }
            }
          },
          yAxis: {
            type: 'category',
            data: this.data2.categories
          },
          color: [
            {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 0, color: 'rgba(10, 244, 223, 0.7)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(10, 244, 223, 0.2)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          ],
          series: [
            {
              name: this.data2.series[0].name,
              type: 'bar',
              barWidth: 16,
              itemStyle: {
                borderRadius: [0,3,3,0]
              },
              data: this.data2.series[0].data
            }
          ]
        };
        option && this.myChart3.setOption(option);
      },
      setTooltip1() {
        let data = arguments[0].data;
        let sort = null;
        if(data.sort) {
          sort = data.sort
        }
        return `
          <div>
            <p><b style="font-size:14px;">【第${sort}名/34】</b></p>
            <p class="tooltip_style"><span class="tooltip_left">${data.name}</p>
            <p class="tooltip_style"><span class="tooltip_left">人口：</span><span class="tooltip_right">${data.value}</span></p>
            <p class="tooltip_style"><span class="tooltip_left">面积：</span><span class="tooltip_right">${data.tooltipValues[0]}平方公里</span></p>
            <p class="tooltip_style"><span class="tooltip_left">流动人口：</span><span class="tooltip_right">${data.tooltipValues[1]}人</span></p>
          </div>
        `;
      },
      setTooltip2() {
        let data = arguments[0];
        return `
          <div class="tooltip">
            <p><b style="font-size:14px;">${data[0].name}</b></p>
            <p class="tooltip_style"><span class="block" style="background: #f37b1d"></span><span class="tooltip_left">${data[0].seriesName}：</span><span class="tooltip_right">${data[0].value}</span></p>
            <p class="tooltip_style"><span class="block" style="background: #38b54a"></span><span class="tooltip_left">${data[1].seriesName}：</span><span class="tooltip_right">${data[1].value}</span></p>
          </div>
        `;
      },
      autoHover(dataIndex) {
        this.myChart1.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: dataIndex});
      }
    }
  };
</script>

<style lang="scss" scoped>
  #china_map {
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    display: flex;
    #map_left{
      width: calc(100% - 300px);
      height: 100%;
      position: relative;
      #map{
        width: 90%;
        height: calc(100% + 100px);
        /*border: 1px solid #fff;*/
        position: absolute;
        top: -100px;
        left: 10%;
      }
    }
    #map_right{
      width: 300px;
      #map_right_top{
        height: 35%;
      }
      #map_right_bottom{
        height: 65%;
      }
    }
  }
  /deep/ .tooltip_style{
    span{
      font-size: 13px;
    }
  }
  /deep/ .tooltip{
    .tooltip_style{
      display: flex;
      align-items: center;
      .block{
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 3px;
      }
      .tooltip_left,
      .tooltip_right{
        display: inline-block;
        font-size: 13px;
      }
    }
  }
</style>
